<template>
    <a-tabs v-model:activeKey="activeKey" class="custom-tabs">
        <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.tab">
            <div class="card-container">
                <!-- 根据 activeKey 和 permission 筛选展示的卡片 -->
                <div
                    v-for="(i, index) in getFilteredContent(item.key)"
                    :key="index"
                    class="card"
                >
                    <div class="card-header">
                        <h3 class="card-title">{{ i.name }}</h3>
                        <div class="card-actions">
                            <a-tooltip title="编辑知识库">
                                <a-button type="text" @click.stop="handleEdit(i)">
                                    <template #icon><EditOutlined /></template>
                                </a-button>
                            </a-tooltip>
                            <a-tooltip title="删除知识库">
                                <a-button type="text" danger @click.stop="handleDelete(i, index)">
                                    <template #icon><DeleteOutlined /></template>
                                </a-button>
                            </a-tooltip>
                            <a-dropdown :trigger="['click']">
                                <a-button type="text" class="more-btn">
                                    <template #icon><MoreOutlined /></template>
                                </a-button>
                                <template #overlay>
                                    <a-menu>
                                        <a-menu-item @click.stop="handleCopy(index)">
                                            <template #icon><CopyOutlined /></template>
                                            复制
                                        </a-menu-item>
                                        <a-menu-item @click.stop="handleShare(index)">
                                            <template #icon><ShareAltOutlined /></template>
                                            {{ shareTitle }}
                                        </a-menu-item>
                                    </a-menu>
                                </template>
                            </a-dropdown>
                        </div>
                    </div>
                    <div class="card-body" @click.stop="handlePreview(i)">
                        <p class="card-description">{{ i.describe? i.describe : "" }}</p>
                        <div class="card-footer">
                            <!-- <span v-if="i.shareStatus === 1" :class="['type-tag', 'highlight']">共享知识库</span> -->
                            <span :class="['type-tag', `type-tag-${i.permission || ''}`]">{{ getTypeLabel(i.permission) }}</span>
                            <span class="update-time">🕒 {{ i.updateTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a-tab-pane>
    </a-tabs>
</template>

<script setup>
import { message, Modal } from 'ant-design-vue';
import { ref, reactive, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import KnowledgeBaseManage from "@/common/api/knowledge/knowledgeBaseManage";
const router = useRouter();

const props = defineProps({
    tabContent: {
        type: Array,
        default: []
    }
});

const emits = defineEmits(['handleEdit', 'init']);
const activeKey = ref('all');
const tabList = reactive([
    { key: "all", tab: "全部" },
    { key: "my", tab: "我的知识库" },
    { key: "company", tab: "团队知识库" },
    // { key: "share", tab: "共享知识库" },
]);
const shareTitle = ref('共享');

// 编辑方法
const handleEdit = (i) => {
    emits('handleEdit', i);
};

const handleDelete = (i, index) => {
    Modal.confirm({
        title: '确认删除',
        content: `是否删除当前知识库：${i.name}？`,
        okText: '确定',
        cancelText: '取消',
        onOk:async() => {
            let result = await KnowledgeBaseManage.del({ ids: i.id} )
            if (result.success) {
                emits('init');
            }
        },
        onCancel() {
            message.info('已取消删除');
        },
    });
};

const handleCopy = (index) => {
    message.success(`已复制第 ${index + 1} 个知识库`);
};

const handleShare = (index) => {
    if (shareTitle.value === '共享') {
        shareTitle.value = '取消共享';
    } else {
        shareTitle.value = '共享';
    }
    message.success(`已分享第 ${index + 1} 个知识库`);
};

const handlePreview = (i) => {
    console.log(i)
    router.push({
        path: `/knowledge/${i.id}`,
        query: { name: i.name }
    });
};

// 根据 type 值返回类型标签文本
const getTypeLabel = (type) => {
    switch (type) {
        case 'only_me':
            return '我的知识库';
        case 'all_team_members':
            return '团队知识库';
        default:
            return '自定义知识库';
    }
};

// 根据 activeKey 筛选展示的内容
const getFilteredContent = (key) => {
    if (key === 'all') {
        return props.tabContent;
    } else if (key === 'my') {
        return props.tabContent.filter(item => item.permission === 'only_me');
    } else if (key === 'company') {
        return props.tabContent.filter(item => item.permission === 'all_team_members');
    } else if (key === 'share') {
        return props.tabContent.filter(item => item.permission!== 'only_me' && item.permission!== 'all_team_members' && item.shareStatus === 1);
    }
    return [];
};
</script>

<style scoped>
/* 选项卡整体样式 */
.custom-tabs {
    padding: 0 20px;
}
/* 卡片容器布局 */
.card-container {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 16px 0;
}

/* 单个卡片样式 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 卡片头部 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    position: relative;
}

.card-title {
    margin: 0;
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 600;
}

/* 新增样式 */
.card-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.card:hover .card-actions {
    opacity: 1;
}

.more-btn {
    transform: rotate(90deg);
}

/* 卡片主体 */
.card-body {
    padding: 16px;
    cursor: pointer;
}

.card-description {
    margin: 0 0 12px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    max-height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 卡片底部 */
.card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.update-time {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 类型标签样式 */
.type-tag {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
}

.type-tag-only_me {
    background-color: #73a6ff;
}

.type-tag-all_team_members {
    background-color: #ffb74d;
}

.type-tag-custom {
    background-color: #e0e0e0;

}
/* 共享高亮样式 */
.highlight {
    background-color: #81c784;
}
/* 按钮悬停效果 */
:deep(.ant-btn-text:not(:disabled)):hover {
    background: rgba(0, 0, 0, 0.04);
}

/* 下拉菜单样式 */
:deep(.ant-dropdown-menu) {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 4px 0;
}

:deep(.ant-dropdown-menu-item) {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
</style>
